<template>
  <div class="receipt-dispatch">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>回单查看</el-breadcrumb-item>
        <el-breadcrumb-item>派车单回单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 查询条件 -->
    <el-card class="search-card">
      <div class="search-title">查询条件</div>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="派车单号：">
          <el-input v-model="searchForm.dispatchNo" placeholder="请输入派车单号"></el-input>
        </el-form-item>
        <el-form-item label="客户订单号：">
          <el-input v-model="searchForm.customerOrderNo" placeholder="请输入客户订单号"></el-input>
        </el-form-item>
        <el-form-item label="车辆：">
          <el-input v-model="searchForm.plateNo" placeholder="请输入车牌号"></el-input>
        </el-form-item>
        <el-form-item label="司机：">
          <el-input v-model="searchForm.driver" placeholder="请输入司机姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查 询</el-button>
          <el-button @click="handleReset">重 置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 回单列表 -->
    <el-card class="table-card">
      <div class="section-title">回单列表</div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="dispatchNo" label="派车单号"></el-table-column>
        <el-table-column prop="route" label="路线"></el-table-column>
        <el-table-column prop="dispatchTime" label="指派时间"></el-table-column>
        <el-table-column prop="vehicleType" label="车辆类型"></el-table-column>
        <el-table-column prop="carrier" label="承运商"></el-table-column>
        <el-table-column prop="plateNo" label="车辆"></el-table-column>
        <el-table-column prop="driver" label="司机"></el-table-column>
        <el-table-column prop="receiptTime" label="回单时间"></el-table-column>
        <el-table-column prop="uploadedReceipts" label="已上传回单数"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <span class="pagination-info">当前第1/50页，每页15条，共500条记录</span>
        <div class="pagination-buttons">
          <el-button size="small">首页</el-button>
          <el-button size="small">上一页</el-button>
          <el-button size="small">下一页</el-button>
          <el-button size="small">尾页</el-button>
          <el-input size="small" v-model="currentPage" style="width: 50px"></el-input>
          <el-button type="primary" size="small">跳转</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ReceiptDispatch',
  data() {
    return {
      searchForm: {
        dispatchNo: '',
        customerOrderNo: '',
        plateNo: '',
        driver: ''
      },
      currentPage: 1,
      tableData: [{
        dispatchNo: '2018781',
        route: '上海-杭州-北京',
        dispatchTime: '2015-07-30 20:24:10',
        vehicleType: '10吨平板',
        carrier: '上海佳吉物流',
        plateNo: '沪A 389899',
        driver: '张春雨, 王大勇',
        receiptTime: '2015-07-30 20:24:10',
        uploadedReceipts: 6
      },
      {
        dispatchNo: '2018781',
        route: '上海-杭州-北京',
        dispatchTime: '2015-07-30 20:24:10',
        vehicleType: '10吨平板',
        carrier: '上海佳吉物流',
        plateNo: '沪A 389899',
        driver: '张春雨, 王大勇',
        receiptTime: '2015-07-30 20:24:10',
        uploadedReceipts: 2
      }]
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索条件：', this.searchForm)
    },
    handleReset() {
      this.searchForm = {
        dispatchNo: '',
        customerOrderNo: '',
        plateNo: '',
        driver: ''
      }
    },
    handleView(row) {
      console.log('查看行：', row)
    }
  }
}
</script>

<style scoped>
.receipt-dispatch {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.section-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 0;
  margin-bottom: 10px;
}
</style> 